<template>
  <div class="bankcard"> 
   <div class="income">
    <!--按钮、搜索-->
    <div class="opr clearfix">
         <el-button type="warning" plain @click="addcard" size="mini">添加银行卡</el-button>
    </div>
    <!-- 操作区-->
 <!--    <p class="opr flexOpr">
      <span class="count">需求数（{{inde}}）</span>
    </p> -->
    <!--表格-->
    <el-table
            :data="tableData"
            :empty-text="empty"
            style="width: 100%">
      <el-table-column
              prop="bank"
              label="开户行">
      </el-table-column>
      <el-table-column
              prop="cardNo"
              label="银行卡号">
      </el-table-column>
      <el-table-column
              prop="name"
              label="开户人">
      </el-table-column>
      <el-table-column
              prop="subBank"
              label="卡户支行">
      </el-table-column>
      <el-table-column
              label="操作时间">
             <template slot-scope="scope">
                 <p>{{scope.row.createTime | stampFormate2}}</p>
             </template>
      </el-table-column>
   <!--    <el-table-column
              label="截稿日期">
        <template slot-scope="scope">
            <p>{{scope.row.endTime | stampFormate2}}</p>
        </template>
      </el-table-column> -->
      <el-table-column
              label="操作">
        <template slot-scope="scope">
            <el-button type="text" size="small" @click="putcard(scope.row.id)">编辑</el-button>
            <el-button type="text" size="small" @click="deletecard(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    
    </el-table>
    <!--分页-->
<!--     <div class="v_paging">
        <el-pagination
            background
           layout="total, sizes, prev, pager, next, jumper"
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :total="inde">
    </el-pagination>
   </div> -->
    <!--弹框-->
 <el-dialog
            :title="dialog.title"
            :modal="false"
            :visible.sync="centerDialogVisible"
            center>
           
           <div v-show="dialog.oprTyp == 1">
              <el-form :model="ruleForm" ref="ruleForm" class="demo-ruleForm" label-width="90px">
                   <el-form-item label="开户名" prop="title" size="mini">
                     <el-input v-model="ruleForm.name" ></el-input>
                   </el-form-item>
                     <el-form-item label="开户行" prop="title" size="mini">
                     <!-- <el-input v-model="ruleForm.bank" ></el-input> -->
                      <el-select v-model="bank" placeholder="请选择银行">
                           <el-option
                             v-for="item in options"
                             :key="item.bank"
                             :label="item.label"
                             :value="item.bank">
                           </el-option>
                         </el-select>
                   </el-form-item>
                     <el-form-item label="银行账户" prop="title" size="mini">
                     <el-input v-model="ruleForm.cardNo" ></el-input>
                   </el-form-item>
                     <el-form-item label="开户支行" prop="title" size="mini">
                     <el-input v-model="ruleForm.subBank" ></el-input>
                   </el-form-item>
              
                   <el-form-item>
                     <el-button type="primary" size="mini" @click="postBankCard">添加</el-button>
                     <!-- <el-button type="primary" size="mini">暂存</el-button> -->
                     <el-button @click="centerDialogVisible = false" size="mini">取消</el-button>
                   </el-form-item>
                 </el-form>
             </div>
              <div v-show="dialog.oprTyp == 2">
              <el-form class="demo-ruleForm">
                    <el-form-item label="是否删除银行卡" prop="title" size="mini">
                   </el-form-item>
                   <el-form-item>
                     <el-button type="primary" size="mini" @click="deleteBankCardid">删除</el-button>
                     <!-- <el-button type="primary" size="mini">暂存</el-button> -->
                     <el-button @click="centerDialogVisible = false" size="mini">取消</el-button>
                   </el-form-item>
                 </el-form>
             </div>
             <div v-show="dialog.oprTyp == 3">
              <el-form :model="ruleForm" ref="ruleForm" class="demo-ruleForm" label-width="90px">
                   <el-form-item label="开户名" prop="title" size="mini">
                     <el-input v-model="ruleForm.name" ></el-input>
                   </el-form-item>
                     <el-form-item label="开户行" prop="title" size="mini">
                     <!-- <el-input v-model="ruleForm.bank" ></el-input> -->
                      <el-select v-model="bank" placeholder="请选择银行">
                           <el-option
                             v-for="item in options"
                             :key="item.bank"
                             :label="item.label"
                             :value="item.bank">
                           </el-option>
                         </el-select>
                   </el-form-item>
                     <el-form-item label="银行账户" prop="title" size="mini">
                     <el-input v-model="ruleForm.cardNo" ></el-input>
                   </el-form-item>
                     <el-form-item label="开户支行" prop="title" size="mini">
                     <el-input v-model="ruleForm.subBank" ></el-input>
                   </el-form-item>
              
                   <el-form-item>
                     <el-button type="primary" size="mini" @click="putBankCardid">修改</el-button>
                     <!-- <el-button type="primary" size="mini">暂存</el-button> -->
                     <el-button @click="centerDialogVisible = false" size="mini">取消</el-button>
                   </el-form-item>
                 </el-form>
             </div>
       
    
    </el-dialog>
  </div>
  



  </div>

 
</template>

<script>
    import {commonService} from '../../service/commonService'
    import {common} from '../../assets/js/common/common'

  export default {
    props: [],
    data () {
      return {

        // 列表
        tableData: [], //列表数据
        empty:'加载中...',
        // 分页
        inde:1,
        pages:{
           no:1,
           size:10,
        },
         // 表单
        ruleForm: {
           name:'',
           cardNo:'',
           bank:'',
           subBank:'',
        },
        options: [{
        bank: '中国工商银行',
        label: '中国工商银行'
          }, {
           bank: '中国农业银行',
           label: '中国农业银行'
           }, {
             bank: '中国建设银行',
             label: '中国建设银行'
           }, {
             bank: '中国邮政银行',
             label: '中国邮政银行'
           }],
            bank: '',
            deletecardid:'',  //银行卡id
      
        // 弹层
       articleDetail:'',  //x_详情
        dialog: {
          title: '添加收款银行信息',
          oprTyp:1,
        },

 
        centerDialogVisible: false, // 弹框
 

      }
    },
    // components: {pagination},
    mounted () {
      this.getBankCard()
    },
    methods: {
      //分页
      // handleSizeChange(val){
      //     this.pages.size=val
      //     this.getBankCard()
      // },
      // handleCurrentChange(val){
      //     this.pages.no=val
      //     this.getBankCard()
      // },
      addcard:function(){
      	  this.ruleForm.name=''
          this.ruleForm.cardNo=''
          this.bank=''
          this.ruleForm.subBank=''
          this.centerDialogVisible=true
          this.dialog.oprTyp=1
          this.dialog.title="添加收款银行信息"
          
      },
    
      //获得列表
      getBankCard () {
        let that = this;
        commonService.getBankCard().then(function (res) { 
                  if(res.data.code==200){
         
                          that.tableData=res.data.datas
                          // that.inde=res.data.datas.total
                          that.empty="暂无数据"
                  }
                  
        });
      },
      // 删除银行卡弹出层
      deletecard:function(id){
      	   this.deletecardid=id
           this.centerDialogVisible=true
           this.dialog.oprTyp=2
            this.dialog.title="删除银行卡"
      },
      // 删除银行卡
      deleteBankCardid:function(){
          let that = this;
        commonService.deleteBankCardid(that.deletecardid).then(function (res) { 
                  if(res.data.code==200){
        
                          that.$message.success('删除成功银行卡成功')
                          that.centerDialogVisible=false
                           that.getBankCard()
                  }
                  
        });
      },
      // 修改银行卡弹层
       putcard:function(id){
       	   let that=this
      	   that.deletecardid=id
      	    commonService.getBankCardid(that.deletecardid).then(function (res) { 
                  if(res.data.code==200){
             
                     let data=res.data.datas
                       that.ruleForm.name=data.name
                       that.ruleForm.cardNo=data.cardNo
                       that.bank=data.bank
                       that.ruleForm.subBank=data.subBank
                  	that.centerDialogVisible=true
                    that.dialog.oprTyp=3
                    that.dialog.title="修改银行卡信息"
                          // that.$message.success('删除成功银行卡成功')
                          // that.centerDialogVisible=false
                           // that.getBankCard()
                  }
                  
        });
           

      },
      // 修改银行卡
      putBankCardid:function(){
      	 let that = this;
         if(that.ruleForm.name==''){
            that.$message.error("开户名不能为空");
            return false
         }
         if(that.bank==''){
            that.$message.error("开户行不能为空");
            return false
         }
         if(that.ruleForm.cardNo==''){
            that.$message.error("银行账户不能为空");
            return false
         }
         if(that.ruleForm.subBank==''){
            that.$message.error("开户支行不能为空");
            return false
         }
        commonService.putBankCardid({id:that.deletecardid,name:that.ruleForm.name,cardNo:that.ruleForm.cardNo,bank:that.bank,subBank:that.ruleForm.subBank}).then(function (res) { 
                  if(res.data.code==200){
           
                          // that.tableData=res.data.datas
                           that.$message.success('修改银行卡信息成功')
                           that.centerDialogVisible=false
                           that.getBankCard()
                          // that.inde=res.data.datas.total
                  }else{
                  	 that.$message.error(res.data.message);
                  }
                  
        });

      },
       //添加银行卡
      postBankCard () {
        let that = this;
         if(that.ruleForm.name==''){
            that.$message.error("开户名不能为空");
            return false
         }
         if(that.bank==''){
            that.$message.error("开户行不能为空");
            return false
         }
         if(that.ruleForm.cardNo==''){
            that.$message.error("银行账户不能为空");
            return false
         }
         if(that.ruleForm.subBank==''){
            that.$message.error("开户支行不能为空");
            return false
         }

        commonService.postBankCard({name:that.ruleForm.name,cardNo:that.ruleForm.cardNo,bank:that.bank,subBank:that.ruleForm.subBank}).then(function (res) { 
                  if(res.data.code==200){
              
                          // that.tableData=res.data.datas
                           that.$message.success('添加银行卡成功')
                           that.centerDialogVisible=false
                           that.getBankCard()
                          // that.inde=res.data.datas.total
                  }else{
                  	 that.$message.error(res.data.message);
                  }
                  
        });
      },
 
       
       
     
  
    },
   
  }
</script>
<style lang="less">
  .bankcard{
    .income{
       padding: 15px;
      .searchIpt {
        width: 250px;
      }
      .opr{
        margin-bottom: 20px;
        .el-button{
        	 float: right;
        }
      }
      .has-gutter{
        background: #909399;
      }
      .el-table th{
        background: #eee;
      }
      .v_paging{
         margin-top: 20px;
         text-align: right;
      }
   .el-dialog--center{
   	  text-align: left;
   }
  .el-dialog__wrapper{
       background: rgba(0, 0, 0, 0.3) !important;
    }
      
    }
  .price{width: 100%;white-space: nowrap; text-overflow:ellipsis; overflow:hidden;}
           

  }
</style>